<template>
  <!-- charts —— 饼图 -->
  <div>
    <!-- 卡片视图 -->
    <el-card>
      光电
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div
        ref="main"
        style="width: 600px; height: 400px; border: 2px solid red"
      ></div>
    </el-card>
  </div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  // 在 mounted 中 ，页面的元素已经渲染完毕
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.main)

    // 4. 指定图表的配置项和数据
    var option = {
      title: {
        text: '智慧照明',
        subtext: '总览',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 1048,
              name: '开灯',
              itemStyle: {
                normal: {
                  color: '#F0C9DC'
                }
              }
            },
            {
              value: 735,
              name: '关灯',
              itemStyle: {
                normal: {
                  color: '#FCDED9'
                }
              }
            },
            {
              value: 580,
              name: '离线',
              itemStyle: {
                normal: {
                  color: '#E4CFB4'
                }
              }
            },
            {
              value: 484,
              name: '停用',
              itemStyle: {
                normal: {
                  color: '#C3DBC2'
                }
              }
            },
            {
              value: 300,
              name: '报警',
              itemStyle: {
                normal: {
                  color: '#A7D1DF'
                }
              }
            }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(Object.assign(option))
  }
}
</script>
